<template>
    <view class="page">
        <view class="content">
            <u-cell-group>
                <u-cell title="未租">
                    <view slot="value">
                        <u-switch v-model="status" activeColor="#5ac725"></u-switch>
                    </view>
                </u-cell>
                <u-cell title="房间名称">
                    <view slot="value">
                        <u-input v-model="form.name" border="none" placeholder="请输入"/>
                    </view>
                </u-cell>
                <u-cell title="租金">
                    <view slot="value">
                        <u-input v-model="form.rent_price" border="none" placeholder="请输入"/>
                    </view>
                </u-cell>

                <view style="padding: 20rpx;">
                    <u-form labelPosition="left"
                            labelWidth="80"
                            :model="form"
                            ref="uForm">

                        <u-form-item label="面积（㎡）" prop="area" borderBottom>
                            <u-input v-model="form.area" border="none" placeholder="请输入面积"/>
                        </u-form-item>

                        <u-form-item label="房屋朝向" prop="'orientation'" borderBottom>
                            <u-radio-group v-model="form.orientation" placement="row">
                                <u-radio label="东" name="东"></u-radio>
                                <u-radio label="南" name="南"></u-radio>
                                <u-radio label="西" name="西"></u-radio>
                                <u-radio label="北" name="北"></u-radio>
                            </u-radio-group>
                        </u-form-item>

                        <u-form-item label="房间特色" prop="public_special_id" borderBottom>
                            <view style="overflow-x:scroll">
                                <u-checkbox-group
                                        v-model="form.public_special_id"
                                        placement="row">
                                    <u-checkbox v-for="(item,index) in roomData" :label="item.name" :name="item.id" :key="index"></u-checkbox>
                                </u-checkbox-group>
                            </view>
                        </u-form-item>

                        <u-form-item label="房型" prop="'join_room_type_id'" borderBottom>
                            <u-radio-group
                                    v-model="form.join_room_type_id"
                                    placement="row">
                                <u-radio v-for="(item,index) in roomTypeData" :label="item.name" :name="item.id" :key="index"></u-radio>
                            </u-radio-group>
                        </u-form-item>
                    </u-form>

                    <u-gap height="20"></u-gap>
                    <text>上传房间图片(最多上传4张)</text>
                    <u-upload
                            :fileList="houseImgList"
                            @afterRead="afterRoomRead"
                            @delete="deleteRoomPic"
                            :name="house"
                            multiple
                            :maxCount="4"
                    ></u-upload>

                </view>

            </u-cell-group>
        </view>

        <view style="width:100%;height: 70px;background-color: #fff;position: fixed;bottom: 1px">
            <u-row>
                <u-button type="primary" text="保存" @click="save"></u-button>
            </u-row>

            <view class="safe-area-inset-bottom"></view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "addroom",
        data() {
            return {
                status: true,
                form: {
                    h_id: '',
                    name: '',
                    rent_price: '',


                    area:'',
                    orientation:'',
                    public_special_id:'',
                    join_room_type_id:'',
                },

                roomData:[],
                roomTypeData:[],
                houseImgList:[],
            };
        },
        onLoad(option) {
            this.form.h_id = option.h_id;

            this.getPublicAndRoomAreaData();
            this.getRoomTypeData()
        },
        methods: {
            save() { //todo 待完善
                let data = uni.$u.deepClone(this.form);
                data.rent_type = this.status ? 1 : 2;  //1=未租，2=已租

                //房间特色
                data.public_special_id = data.public_special_id.join();

                // 房间图片
                let array = [];
                for (let i = 0; i < this.houseImgList.length; i++) {
                    array.push(this.houseImgList[i].url);
                }
                data.room_img = array.join();

                uni.showLoading({title: '正在保存'});
                // 向后端请求验证码
                uni.$u.http.post('/api.php/house/house_zi_add', data).then(res => {
                    uni.hideLoading();
                    // 这里此提示会被this.start()方法中的提示覆盖
                    uni.$u.toast('保存成功');
                    uni.navigateBack({delta: 1});
                });
            },


            getPublicAndRoomAreaData() {
                uni.$u.http.get('/api.php/house/house_special').then(res => {
                    for (let i = 0; i < res.length; i++) {
                        if(res[i].type === 2){
                            this.roomData.push(res[i]);
                        }
                    }
                });
            },
            getRoomTypeData(){
                uni.$u.http.get('/api.php/house/house_room_type').then(res => {
                    for (let i = 0; i < res.length; i++) {
                        this.roomTypeData.push(res[i]);
                    }
                });
            },

            // 删除图片
            deletePic(event) {
                this[`${event.name}ImgList`].splice(event.index, 1)
            },
            // 新增图片
            async afterRead(event) {
                // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
                let lists = [].concat(event.file)
                let fileListLen = this[`${event.name}ImgList`].length
                lists.map((item) => {
                    this[`${event.name}ImgList`].push({
                        ...item,
                        status: 'uploading',
                        message: '上传中'
                    })
                });
                for (let i = 0; i < lists.length; i++) {
                    const result = await this.uploadFilePromise(lists[i].url)
                    let item = this[`${event.name}ImgList`][fileListLen]
                    this[`${event.name}ImgList`].splice(fileListLen, 1, Object.assign(item, {
                        status: 'success',
                        message: '',
                        url: result
                    }));
                    fileListLen++
                }
            },
            uploadFilePromise(url) {
                let server = this.$url + '/api.php/index/file_update';
                return new Promise((resolve, reject) => {
                    uni.uploadFile({
                        url: server,
                        filePath: url,
                        name: 'image[]',
                        success: (res) => {
                            let resp = JSON.parse(res.data);
                            setTimeout(() => {
                                resolve(resp.data.img_url[0]);
                            }, 1000)
                        }
                    });
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .page {
        width: 100%;
        min-height: 100vh;
        background-color: $u-bg-color;
    }

    .content {
        padding: 20 rpx;
        background-color: #ffffff;
    }
</style>